<template>
	<view class="">
		<scroll-view class="supply-box" :scroll-top="scrollTop" scroll-y="true">
			<!-- 招标信息 -->
			<view class="active-list">
				<view class="active-title">
					<view class="active-top">
						<text class="">*</text>姓名<text class="tip" v-if="blurProNullShow">请输入您的姓名</text>
					</view>
					<u--textarea placeholder="请输入您的姓名(必填)" @blur="proBlur(productName)" v-model="productName"
						border="none" maxlength="12"></u--textarea>
				</view>
				<view class="active-title">
					<view class="active-top">
						<text class="">*</text>联系电话<text class="tip" v-if="blurProNumNullShow">请输入您的电话</text>
					</view>
					<u--textarea :formatter="numFormatter" ref="textarea" placeholder="请输入您的联系电话(必填)"
						@blur="proNumBlur(productNum)" v-model="productNum" border="none" maxlength="11"></u--textarea>
				</view>
				<view class="active-title">
					<view class="active-top">
						<text class="">*</text>职位
					</view>
					<view class="textareaPh" :style="{color:position?'#606266':'#c0c4cc'}" @click="positionFocus">
						{{position.trim()||'请选择您的职位(必填)'}}
					</view>
					<!-- 	<u--textarea placeholder="请选择您的职位(必填)" @focus="positionFocus" v-model.trim="position"
						border="none"></u--textarea> -->

				</view>
				<view class="active-title">
					<view class="active-top">
						<text class="">*</text>公司名称<text class="tip" v-if="blurProNameNullShow">请输入公司名称</text>
					</view>
					<u--textarea placeholder="请输入您的公司名称(必填)" @blur="proNameBlur(companyName)" v-model="companyName"
						border="none" maxlength="20"></u--textarea>
				</view>
				<view class="active-title">
					<view class="active-top">
						<text class="">*</text>公司所在地
					</view>
					<u--textarea placeholder="点击选择您的公司所在地(必填)" @focus="areaFocus" v-model="areaVal"
						border="none"></u--textarea>

				</view>


				<view class="active-title describe-title">
					<view class="active-top">
						<text class=""></text>公司简介
					</view>
					<u--textarea placeholder="完善采购信息,帮助供应商了解你的采购需求" v-model="productDescribe" border="none"
						maxlength="200"></u--textarea>
				</view>

				<!-- 第二批内容 -->
				<view class="active-title active-tt">
					<view class="active-top">
						<text class="">*</text>可供货地区
					</view>
					<u--textarea placeholder="点击选择您的公司所在地(必填)" @focus="regionFocus" v-model="region"
						border="none"></u--textarea>
				</view>

				<view class="active-title">
					<view class="active-top">
						服务
					</view>
					<u--textarea @focus="serverFocus" v-model="serverVal" placeholder="点击选择服务(可多选)"
						border="none"></u--textarea>
				</view>

				<view class="active-title describe-title">
					<view class="active-top">
						<text class="">*</text>主营业务
					</view>
					<u--textarea placeholder="简单介绍公司经营的主体项目或主营业务" v-model="business" border="none"
						maxlength="100"></u--textarea>
				</view>
				<!--
				<view class="active-title">
					<view class="active-top">
						<text class="">*</text class="tip">供应产品(<text>{{productArrNum}}</text>/30)
					</view>
					<view class="active-text" v-if="!productListsShow" @click="proFocus">
						<text>点击添加供应产品</text>
					</view>
					<view class="pro-info-box" v-if="productListsShow" v-for="(item,index) in productArr" :key="index">
						<img class="pro-close" @click="deletePro(item,index)"
							src="https://file.casugn.com/storecompcard//oovODq3TnlkM9713e815484d918f77a3204451855016_1661411923642.png"
							alt="">
						<view class="pro-img">
							<u-image :src="item.imageList" width="150rpx" height="150rpx" :lazy-load="true"
								mode="aspectFill" radius="16rpx"></u-image>
						</view>
						<view class="pro-content">
							<view class="pro-name">
								{{item.name}}
							</view>
							<view class="pro-sec">
								<text class="pro-sec1">￥{{item.price}}</text>
								<text class="pro-sec2">{{item.region}}</text>
							</view>
							<view class="pro-kg">
								产品规格：<text>{{item.specs}}</text>
							</view>
						</view>
					</view>
					<view class="contain-add" v-show="containAddShow">
						<img @click="proFocus"
							src="https://file.casugn.com/storecompcard//JYsOvvFKxthd32c473bc40d7db18b9b08b0a2a5231c5_1661568060212.png"
							alt="">
						<text@click="proFocus">继续添加供应产品</text>
					</view>
				</view> -->


				<view class="sign-up">
					<u-button type="primary" color="#2684ff" text="下一步" throttleTime="600"
						@click="nextStep(item,index)">
					</u-button>
				</view>

			</view>
		</scroll-view>
		<!-- 职位选择 -->
		<u-popup :show="positionShow" @close="positionClose" closeable round="16">
			<view class="positon-box">
				<view class="title">
					职位
				</view>
				<view class="pos-title">
					职位
				</view>
				<view class="pos-input">
					<u--input placeholder="手动填写您的职位(2-10个字)" border="surround" v-model.trim="postionValue"
						@change="postionChange" clearable maxlength="10"></u--input>
				</view>
				<view class="pos-subtitle">
					快速选择
				</view>
				<view class="pos-select">
					<view :class="[positionActiveIndex==index?'pos-select-active-box':'pos-select-box']"
						v-for="(item,index) in postionLists" @click="postionClick(item,index)" :key="index">
						{{item}}
					</view>
				</view>
				<view class="pos-button">
					<view class="pos-button-cancel" @click="posCancel">
						取消
					</view>
					<view class="pos-button-confirm" @click="posConfirm">
						确认
					</view>
				</view>

			</view>
		</u-popup>
		<!-- 公司所在地 -->
		<!-- <u-overlay :show="areaShow" :duration="400" :z-index ="999" :opacity="1">
			<view class="area-box">

			</view>
		</u-overlay> -->
		<areaPage class="area-page" @areaSelectName="areaSelectName" v-show="areaShow"></areaPage>
		<regionPage class="region-page" @areaSelectName="regionSelectName" v-show="regionShow"></regionPage>
		<serverPage class="server-page" @serverSelectName="serverSelectName" v-show="serverShow"></serverPage>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import baseConfig from '@/config/baseUrl.js'
	import areaPage from '@/pagesBusiness/supplyArea/supplyArea.vue'
	import regionPage from '@/pagesBusiness/supplyAllArea/supplyAllArea.vue'
	import serverPage from '@/pagesBusiness/supplyServer/supplyServer.vue'
	export default {
		components: {
			areaPage,
			regionPage,
			serverPage
		},
		data() {
			return {
				region: '', //可供货地区
				regionShow: false,
				serverVal: '', //服务的值
				serverShow: false, //服务弹窗
				business: '', //主营业务
				productArrNum: 0, //供应产品数量
				productListsShow: false,
				containAddShow: false,
				supplyProductName: '', //供应产品value


				blurProNullShow: false, //姓名输入信息为空失焦显示
				productName: '', //姓名输入信息
				blurProNumNullShow: false, //联系电话输入信息为空失焦显示
				productNum: '', //联系电话输入信息
				blurProNameNullShow: false, //公司名称输入信息为空失焦显示
				companyName: '', //公司名称
				customStyle0: {
					marginBottom: '8px',
					fontSize: '32px',
					marginLeft: '0'
				},
				customStyle1: {
					marginBottom: '8px',
					fontSize: '32px',
					marginLeft: '15px'
				},
				productDescribe: '',

				position: '', //职位
				positionShow: false, //职位隐藏
				postionLists: ["企业负责人", "总经理", "个体工商户", "业务总监", "销售总监", "市场总监", "业务经理", "销售经理", "市场经理", "销售/业务员", "项目经理",
					"工程师"
				],
				postionValue: '', //职位
				positionActiveIndex: -1,
				areaShow: false, //公司所在地弹窗
				areaVal: '', //公司所在地
				historyInfo: null,
				openId: '',
				needId: '',
				originPath: "release"
			}
		},
		computed: {
			...mapGetters({
				haveSupplier: 'getHaveSupplier',
			}),
		},
		onLoad(option) {
			let openId = uni.getStorageSync('openId')
			this.openId = openId.openid
			if (this.haveSupplier) {
				this.querySupplyDefaultInfo()
			}
			if (option.path) this.originPath = option.path
		},
		methods: {
			// 根据openId获取默认信息
			querySupplyDefaultInfo() {
				uni.showLoading({
					title: '获取中'
				})
				this.$api.querySupplyDefault({
					openId: this.openId
				}).then(res => {
					if (res.success) {
						console.log(res.result, 'success')
						this.productName = res.result.userName == null ? '' : res.result.userName
						this.productNum = res.result.userTel == null ? '' : res.result.userTel
						this.position = res.result.userPosition == null ? '' : res.result.userPosition
						this.companyName = res.result.name == null ? '' : res.result.name
						this.areaVal = res.result.city == null ? '' : res.result.city
						this.productDescribe = res.result.perfile == null ? '' : res.result.perfile
						this.needId = res.result.id
						this.region = res.result.region == null ? '' : res.result.region
						this.serverVal = res.result.service == null ? '' : res.result.service
						this.business = res.result.business == null ? '' : res.result.business

					}
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading()
					}, 600)
				})
			},
			// 数量输入框限制输入字数
			numFormatter(value) {
				console.log(value)
				// 让输入框只能输入数值，过滤其他字符
				return value.replace(/[^0-9]/ig, "")
			},
			// 姓名失焦
			proBlur(e) {
				console.log(e)
				if (e) {
					this.blurProNullShow = false
				} else {
					this.blurProNullShow = true
				}
			},
			// 手机号失焦
			proNumBlur(e) {
				console.log(e)
				if (e) {
					this.blurProNumNullShow = false
				} else {
					this.blurProNumNullShow = true
				}
			},
			// 公司名称失焦
			proNameBlur(e) {
				// onsole.log(e)
				if (e) {
					this.blurProNameNullShow = false
				} else {
					this.blurProNameNullShow = true
				}
			},
			// 职位聚焦事件
			positionFocus() {
				this.positionShow = true
				uni.hideKeyboard()
			},
			// 职位弹窗关闭事件
			positionClose() {
				this.positionShow = false
			},

			postionChange(val) {
				console.log(val)
			},
			// 职位点击
			postionClick(item, index) {
				this.positionActiveIndex = index
				this.postionValue = item
				let obj = this.postionLists.find(ele => {
					return ele == item
				})
			},
			// 职位取消选择
			posCancel() {
				this.positionActiveIndex = -1
				this.postionValue = ''
				this.positionShow = false
			},
			// 职位确认选择
			posConfirm() {
				if (this.postionValue.trim() == '') {
					this.$showToast('请选择或者填写职位')
					return false
				} else if (this.postionValue.length < 2) {
					this.$showToast('请至少输入2个字')
					return false
				}
				this.position = this.postionValue
				this.positionShow = false

			},

			// 公司所在地聚焦
			areaFocus() {
				this.areaShow = true
				this.regionShow = false
				this.serverShow = false
				uni.hideKeyboard()
				// uni.navigateTo({
				// 	url: '/pagesBusiness/supplyArea/supplyArea'
				// })
			},
			areaSelectName(val) {
				console.log("子传父")
				console.log(val)
				this.areaVal = val
				this.areaShow = false
			},

			// 可供货地区聚焦
			regionFocus() {
				this.regionShow = true
				this.areaShow = false
				this.serverShow = false
				uni.hideKeyboard()
			},
			regionSelectName(val) {
				console.log("子传父")
				console.log(val)
				this.region = val.toString()
				this.regionShow = false
			},
			// 服务
			serverFocus() {
				this.serverShow = true
				this.areaShow = false
				this.regionShow = false
				uni.hideKeyboard()
			},
			serverSelectName(val) {
				console.log(val, '选择服务子组件传值')
				if (val.length > 0) {
					this.serverVal = ''
					let arr = []
					arr.push(val[0], val[1], val[2])
					this.serverVal = arr.toString()
					this.serverShow = false
				}
				if (val.length == 0) {
					this.serverVal = ''
					this.serverShow = false
				}

			},
			// 下一步
			nextStep(item, index) {
				if (this.productName == "") {
					uni.showToast({
						title: "姓名不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.productNum == "") {
					uni.showToast({
						title: "联系电话不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.position == "") {
					uni.showToast({
						title: "职位不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.companyName == "") {
					uni.showToast({
						title: "公司名称不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.areaVal == "") {
					uni.showToast({
						title: "公司所在地不能为空",
						icon: 'none'
					});
					return false
				}


				if (this.region == "") {
					uni.showToast({
						title: "可供货地区不能为空",
						icon: 'none'
					});
					return false
				}
				if (this.business == "") {
					uni.showToast({
						title: "主营业务不能为空不能为空",
						icon: 'none'
					});
					return false
				}
				let data = {
					userName: this.productName,
					userTel: this.productNum,
					userPosition: this.position,
					name: this.companyName,
					city: this.areaVal,
					perfile: this.productDescribe,
					region: this.region,
					service: this.serverVal,
					business: this.business,
					openId: this.openId,
					id: this.needId,
				}
				let method = this.needId ? 'supplyNewSubmit' : 'supplyAllInfoSava'
				this.$api[method](data).then(res => {
					if (res.success) {
						this.$store.commit('setSupplierInfo', res.result)
						this.$toPage('/pagesBusiness/mySupplyGoods/mySupplyGoods?path=' + this.originPath)
					} else {
						this.$showToast(res.message)
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-border {
			border-width: 0 !important;
		}
	}

	.supply-box {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.active-list {
		background: #FFFFFF;
		border-bottom: 1upx solid #f6f6f6;
		padding: 41upx 32upx 100upx;
		position: relative;

		.active-title {
			letter-spacing: 3upx;
			font-size: 30upx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #666666;
			// height: 110upx;
			border-bottom: 1px solid #f6f6f6;
			margin-top: 20upx;

			.textareaPh {
				font-size: 30rpx;
				height: 35px;
				margin-top: 25rpx;
			}

			.active-top {
				font-size: 26upx;
				font-weight: bold;

				.tip {
					margin-left: 8upx;
				}

				text {
					color: red;
					margin-right: 5upx;
				}
			}

			.active-text {
				line-height: 120rpx;
			}

			.buy-radio {}

			.buy-many {
				font-size: 22upx;
				color: #2979ff;
				padding-bottom: 10upx;
			}

			::v-deep .u-radio-group {
				margin-top: 20upx;
				margin-bottom: 20upx;
			}

			::v-deep .u-textarea {
				margin-top: 25upx;
				display: flex;
				justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size: 30upx;
			}

			::v-deep .u-textarea__count {
				position: relative;
			}

			.pro-info-box {
				display: flex;
				position: relative;
				z-index: 20;
				margin-top: 20upx;
				padding-bottom: 20upx;
				padding-left: 20rpx;

				.pro-close {
					position: absolute;
					width: 40upx;
					height: 40upx;
					left: 0;
					top: -8rpxrpx;
					z-index: 4;
					background-color: #fff;
					border-radius: 50%;
					padding: 4rpx;
				}

				.pro-img {
					margin-top: 8upx;

					img {
						width: 150upx;
						height: 150upx;
					}
				}

				.pro-content {
					margin-left: 30upx;
					font-size: 30upx;
					line-height: 50upx;

					.pro-name {
						font-weight: 600;
						margin-top: 10upx;
					}

					.pro-sec {
						.pro-sec1 {
							color: #ff8d07;
							font-weight: 600;
						}

						.pro-sec2 {
							color: #5f5b4f;
							margin-left: 20upx;
						}
					}

					.pro-kg {
						font-size: 22rpx;
						color: #999c95;
					}
				}
			}

			.contain-add {
				margin-top: 30upx;
				text-align: center;
				padding-bottom: 20upx;

				img {
					width: 50upx;
					height: 50upx;
					vertical-align: middle;
				}

				text {
					margin-left: 10upx;
					color: #2979ff;
				}
			}
		}

		.describe-title {

			::v-deep .u-textarea {
				margin-top: 25upx;
				// display: flex;
				display: block;
				// justify-content: space-between;
				padding: 0;
				// height: 60upx;
				font-size: 30upx;
			}

			::v-deep .u-textarea__count {
				position: relative;
				display: block;
				text-align: right;
				margin-top: 10upx;
			}
		}

		.active-info {
			border-bottom: 1upx solid #EEEEEE;

			// padding: 37upx 0;
			.active-img-des {
				font-size: 24upx;
				color: rgb(153, 153, 153);
				margin-top: 20upx;
			}

			.active-info-img {
				margin: 0 auto;
				// margin-top: 30upx;
				// width: 690upx;
				// height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;
				margin-top: 20upx;

				// border-bottom: 1upx solid #EEEEEE;
				// img {
				// 	width: 690upx;
				// 	height: 350upx;
				// }

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0.1000) 100%);
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}


		.sign-up {
			// margin-top: 120upx;
		}

		::v-deep .u-upload__deletable {
			right: 20upx;
			top: 20upx;
			width: 20upx;
			height: 20upx;
			text-align: center;
			border-bottom-left-radius: 0;

			// background: transparent;
			.u-icon--right {
				text {
					font-size: 30upx !important;
					top: 7upx !important;
					left: 6upx !important;
				}
			}
		}

	}

	.positon-box {
		padding: 0 32rpx;
		font-size: 26rpx;

		.title {
			height: 92rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #1D2129;
			line-height: 92rpx;
			text-align: center;
		}

		.pos-title {

			margin: 32rpx 0 16rpx;
			line-height: 36rpx;
		}

		.pos-input {
			border-bottom: 1px solid #E5E6EB;

			::v-deep {
				.u-input {
					padding-left: 0 !important;
				}

				.uicon-close {
					font-size: 20rpx !important;
					padding-left: 0;
				}
			}
		}

		.pos-subtitle {
			margin-top: 32rpx;
			color: #666666;
		}

		.pos-select {
			margin-top: 20upx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			font-size: 28rpx;

			.pos-select-box {
				width: 200upx;
				background: #f5f5f5;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
				border-radius: 10upx;
			}

			.pos-select-active-box {
				width: 200upx;
				background: #E9F0FD;
				color: #2684ff;
				text-align: center;
				line-height: 70upx;
				margin-left: 20upx;
				margin-top: 20upx;
			}
		}


	}


	.pos-button {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin-top: 56upx;
		font-size: 30rpx;
		padding-bottom: 20rpx;

		.pos-button-cancel,
		.pos-button-confirm {
			border-radius: 4rpx;
			width: 45%;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
		}

		.pos-button-cancel {
			color: #2684ff;
			background-color: #E9F0FD;
		}

		.pos-button-confirm {
			background: #2684ff;
			color: white;
		}
	}

	.area-page {
		position: absolute;
		z-index: 50;
		width: 100%;
		// height: 100%;
		top: 0;
		left: 0;
		background: white;
	}

	.region-page {
		position: absolute;
		z-index: 50;
		width: 100%;
		// height: 100%;
		top: 0;
		left: 0;
		background: white;
	}

	.server-page {
		position: absolute;
		z-index: 50;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: white;
	}
</style>
